<template>
  <div>
    <!-- 查询参数及按钮部分 -->
    <div class="filter-container">
      <el-dialog
        v-dialogDrag
        :close-on-click-modal="false"
        :title="dialogStatus"
        :visible.sync="dialogEditFormVisible"
        style="padding:0px"
        width="25%"
      >
        <el-form
          ref="dataForm"
          class="dialog-Backgroundcolor"
          :model="listQuery"
          label-position="right"
        >
          <el-row>
            <el-row style="margin-left:20px">
              <el-col>
                <el-form-item label="身份证号码：">
                  <el-input
                    v-model="listQuery.idenNo"
                    class="filter-item Borderwidth"
                  />
                </el-form-item>
              </el-col>

            </el-row>
            <el-button
              type="primary"
              style="float:right;"
              @click="handleQuery"
            >
              查询
            </el-button>

          </el-row>

        </el-form>
      </el-dialog>
    </div>
    <!-- 表格部分 -->
    <el-table
      ref="singalTable"
      v-loading="listLoading"
      :data="list"
      border
      fit
      row-key="id"
      :tree-props="{children: 'children'}"
      :height="tableHeight"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <template slot="empty">
        <tableEmpty />
      </template>
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        prop="no"
        label="序号"
        align="center"
        width="80"
      />
      <el-table-column
        label="单位名称"
        align="center"
      >
        <template slot-scope="{row}">
          <span style="float: left">{{ row.agencyName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="personName"
        label="姓名"
        align="center"
      />
      <el-table-column
        prop="newPersonName"
        label="现姓名"
        align="center"
      />
      <el-table-column
        prop="idenNo"
        width="170"
        label="身份证号码"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.idenNo  }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="开户银行"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.salaCardBank | bankFilter(that) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="newSalaCardNo"
        width="170"
        label="新工资卡号"
        align="center"
      />
      <!-- <el-table-column
        label="后续操作"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.isLongUse | longUseFilter(that) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="oldSalaCardNo"
        width="170"
        label="原工资卡号"
        align="center"
      />
      <el-table-column
        prop="bankBackRemark"
        label="账户状态"
        align="center"
      />
      <el-table-column
        prop="personId"
        label="操作"
        align="center"
      >
      <template slot-scope="{row}">
          <el-button @click="appendixOpen(row)" type="text" size="small">查看附件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
    <Enclosure
      ref="enc"
      :middle-table-code="2"
    />
  </div>
</template>

<script>
import { getAgencyBank, exportSalaryData } from '@/api/baseInfo'
import Enclosure from '@/components/Enclosure'
import {
  queryFinanceVerifyPage,
  financeVerifyConfirm,
  financeVerifySendBack,
  financeVerifyCancelConfirm,
  financeVerifyAuditPass,
  financeVerifyUndoAudit
} from '@/api/exceptionCardNumberManage/financialAuditCardNumber'
import {
  generateBankData,
  regenerateBankData
} from '@/api/exceptionCardNumberManage/cardNumberFinancialProcess'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import tableEmpty from '@/components/table/empty'

export default {
  name: 'FinanciaAudit',
  components: { Pagination, Enclosure, tableEmpty },
  filters: {
    bankFilter(type, that) {
      const agencyBankLists = that.agencyBankLists
      for (const item in agencyBankLists) {
        if (agencyBankLists[item].code === type) {
          return agencyBankLists[item].name
        }
      }
      return ''
    },
    longUseFilter(type, that) {
      if (type === 1) {
        return '长期使用'
      } else if (type === 0) {
        return '本月使用'
      }
    },
    //号码脱敏显示
    hideMiddle(val) {
      if(val!== undefined&& val!== null){//避免列表中存在空数据报错
        return `${val.substring(0,4)}****${val.substring(val.length-4)}`
      }else{
        return val
      }
    }
  },
  props: ['tabPane'],
  data() {
    return {
      tableHeight: null,
      dialogStatus: '',
      that: this,
      dialogEditFormVisible: false,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 200,
        flag: 0,
        agencyId: '0',
        idenNo: ''
      },
      list: [],
      total: 0,
      agencyBankLists: [],
      listUnit: []
    }
  },
  watch: {
    list(val) {
      this.doLayout()
    }
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  // 开始的地方
  created() {
    this.listQuery.page = 1
    this.listQuery.flag = this.tabPane
    this.initBaseInfo()
    this.getList()
  },
  methods: {
    // 树方法
    handleTree(data) {
      // if (!Object.prototype.hasOwnProperty.call(data, 'children')) {
      this.listQuery.agencyId = data.id
      this.getList()
      // }
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.singalTable.doLayout()
      })
    },
    getTbHeight() {
      this.tableHeight = window.innerHeight - 220
    },
    getList() {
      this.listLoading = true
      queryFinanceVerifyPage(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },

    handleQuery() {
      this.listQuery.page = 1
      // this.listQuery.limit = 10
      this.getList()
      this.dialogEditFormVisible = false
    },
    // 初始化基础数据
    initBaseInfo() {
      getAgencyBank().then(response => {
        this.agencyBankLists = Object.assign({}, response.data)
      })
    },
    handleConfirm() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('handleCallBack')
        return
      }
      this.listUnit.splice(0, this.listUnit.length)
      for (let index = 0; index < selection.length; index++) {
        const element = selection[index]
        this.listUnit.push(element)
      }

      // 提示框确认
      // this.$confirm('确定财政确认吗？', {
      //   closeOnClickModal: false,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      financeVerifyConfirm(this.listUnit).then(response => {
        if (response.data === '500') {
          this.$message({
            showClose: true,
            message: '存在撤销送审数据，不允许确认',
            type: 'warning',
            duration: 4000
          })
          this.$emit('handleCallBack')
        } else if (response.data === '200') {
          this.$message({
            showClose: true,
            message: '财政确认成功',
            type: 'success',
            duration: 4000
          })
          this.$emit('handleCallBack')
        }
        // 更新
        this.handleQuery()
        // })
      })
        .catch(() => {
          this.$emit('handleCallBack')
        })
    },
    // 查询
    query() {
      this.dialogStatus = '查询'
      this.dialogEditFormVisible = true
    },
    // 财政退回
    fiscalSendBack() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('SendBackCallBack')
        return
      }
      this.listUnit.splice(0, this.listUnit.length)
      for (let index = 0; index < selection.length; index++) {
        const element = selection[index]
        this.listUnit.push(element)
      }
      // 提示框确认
      // this.$confirm('确定财政退回吗？', {
      //   closeOnClickModal: false,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      financeVerifySendBack(this.listUnit).then(response => {
        if (response.data === '200') {
          this.$message({
            showClose: true,
            message: '退回成功',
            type: 'success',
            duration: 4000
          })
          this.$emit('SendBackCallBack')
        }
        // 更新
        this.handleQuery()
        // })
      })
        .catch(() => {
          this.$emit('SendBackCallBack')
        })
    },
    // 取消确认
    cancelConfirm() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('cancelCallBack')
        return
      }
      this.listUnit.splice(0, this.listUnit.length)
      for (let index = 0; index < selection.length; index++) {
        const element = selection[index]
        this.listUnit.push(element)
      }
      // 提示框确认
      // this.$confirm('确定取消确认吗？', {
      //   closeOnClickModal: false,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      financeVerifyCancelConfirm(this.listUnit).then(response => {
        if (response.data === '200') {
          this.$message({
            showClose: true,
            message: '取消确认成功',
            type: 'success',
            duration: 4000
          })
          this.$emit('cancelCallBack')
        }
        // 更新
        this.handleQuery()
        // })
      })
        .catch(() => {
          this.$emit('cancelCallBack')
        })
    },
    // 审核通过
    auditPass() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('PassCallBack')
        return
      }
      this.listUnit.splice(0, this.listUnit.length)
      for (let index = 0; index < selection.length; index++) {
        const element = selection[index]
        this.listUnit.push(element)
      }
      // 提示框确认
      // this.$confirm('确定审核通过吗？', {
      //   closeOnClickModal: false,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      financeVerifyAuditPass(this.listUnit).then(response => {
        if (response.data === '200') {
          this.$message({
            showClose: true,
            message: '审核通过成功',
            type: 'success',
            duration: 4000
          })
          this.$emit('PassCallBack')
        }
        // 更新
        this.handleQuery()
        //  })
      })
        .catch(() => {
          this.$emit('PassCallBack')
        })
    },
    // 撤销审核
    undoAudit() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('AuditCallBack')
        return
      }
      this.listUnit.splice(0, this.listUnit.length)
      for (let index = 0; index < selection.length; index++) {
        const element = selection[index]
        this.listUnit.push(element)
      }
      // 提示框确认
      // this.$confirm('确定撤销审核吗？', {
      //   closeOnClickModal: false,
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      financeVerifyUndoAudit(this.listUnit).then(response => {
        if (response.data === '200') {
          this.$message({
            showClose: true,
            message: '撤销审核成功',
            type: 'success',
            duration: 4000
          })
          this.$emit('AuditCallBack')
        }
        // 更新
        this.handleQuery()
        // })
      })
        .catch(() => {
          this.$emit('AuditCallBack')
        })
    },
    //  生成银行数据
    generateBankData() {
       // 获取当前 点击的数据
      const selection = this.$refs.singalTable.selection;
      if (selection.length === 0) {
        // 将请最少选择一条数据返回
        this.$message({
          showClose: true,
          message: '请至少选择一条数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('generateBankDataCallBack')
        return
      }
      const ids = []
       selection.forEach(item => {
        ids.push(item.agencyId)        
        })
      generateBankData(ids).then(() => {
        this.$message({
          showClose: true,
          message: '生成并上传成功',
          type: 'success',
          duration: 4000
        })
        this.$emit('generateBankDataCallBack')
        // 更新
        this.handleQuery()
      }).catch(() => {
        this.$emit('generateBankDataCallBack')
      })
    },
    //  重新生成银行数据
    regenerateBankData() {
      regenerateBankData().then(() => {
        this.$message({
          showClose: true,
          message: '生成并上传成功',
          type: 'success',
          duration: 4000
        })
        this.$emit('generateBankDataCallBack')
      }).catch(() => {
        this.$emit('regenerateBankDataCallBack')
      })
    },
    // 导出银行数据
    exportSalaryData() {
      const province = this.$store.getters.userInfo.province
      const fileName = 'exceptionCardNumberFile'
      exportSalaryData(fileName, province).then((response) => {
        const link = document.createElement('a')
        const objectUrl = URL.createObjectURL(response)
        link.href = objectUrl
        link.download = '银行数据.zip'
        link.click()
        URL.revokeObjectURL(objectUrl)
        this.$emit('exportCallback')
      }).catch(() => {
        this.$emit('exportCallback')
      })
    },
    // 附件方法
    appendixOpen(val) {
      const personList = []
      personList.push({ id: val.personId })
     
      this.$refs.enc.appendixOpen(personList,false, undefined, val.agencyId)
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__row--level-1 {
  .el-table-column--selection {
    .el-checkbox {
      display: none;
    }
  }
}
</style>
